import React, { Component } from 'react';
import { CommunityListContainer } from './communityList.style'
import {withRouter} from 'react-router-dom'

@withRouter
class communityList extends Component {

    constructor() {
        super();
        this.state = {
            arr: [
                
            ]
        }

    }

    getItem=(item)=>{
        localStorage.setItem('community',JSON.stringify(item))
        this.props.history.push('/community')
    }
    render() {
        return (
            <div style={
                {
                    padding: '0.16rem  0.16rem 0 0.16rem',
                    display: 'flex',
                    flexDirection: 'column'
                }
            }>
                {
                    this.props.list.map((element,index) => {
                        return (
                            <CommunityListContainer backgroundImg={element.picture} key={index}>
                                <div className="container" onClick={()=>this.getItem(element)}>
                                    <div className="icon">
                                        <h1><img src={`${element.icon}`} alt="" /></h1>
                                        <span>
                                            <i>{element.formattedAttend}</i>
                                            <b>参与人数</b>
                                        </span>
                                    </div>
                                    <div className="title">
                                        <h2>{element.title}</h2>
                                        <h3>{element.introduction}</h3>
                                    </div>
                                </div>
                            </CommunityListContainer>
                        )
                    })
                }


            </div>

        );
    }
}

export default communityList;